<template>
  <div id="detail">
    <nav-bar class="detailNav">
      <div slot="left" @click="backClick">
        <img src="~assets/img/common/back.svg" alt="" class="back" />
      </div>

      <div slot="center" class="title">
        <div
          v-for="(item, index) in titles"
          :key="index"
          class="itemTitle"
          :class="{ active: index === currentIndex }"
          @click="titleClick(index)"
        >
          {{ item }}
        </div>
      </div>
    </nav-bar>
    <Scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      @scroll="contentScroll"
    >
      <detail-swiper :topImages="topImages" />

      <div v-if="Object.keys(goods).length !== 0" class="base-info">
        <div class="info-title">{{ goods.title }}</div>
        <div class="info-price">
          <span class="n-price">{{ goods.newPrice }}</span>
          <span class="o-price">{{ goods.oldPrice }}</span>
        </div>
        <div class="info-other">
          <span>{{ goods.columns[0] }}</span>
          <span>{{ goods.columns[1] }}</span>
          <span>{{ goods.services[goods.services.length - 1].name }}</span>
        </div>
        <div class="info-service">
          <span
            class="info-service-item"
            v-for="index in goods.services.length - 1"
            :key="index"
          >
            <!-- <img :src="goods.services[index - 1].icon" alt="" /> -->
            <img :src="goods.services[index - 1].icon | Imgfilter" />
            <span>{{ goods.services[index - 1].name }}</span>
          </span>
        </div>
      </div>

      <div class="shop-info">
        <div class="shop-top">
          <img :src="shop.logo" />
          <span class="title">{{ shop.name }}</span>
        </div>
        <div class="shop-middle">
          <div class="shop-middle-item shop-middle-left">
            <div class="info-sells">
              <div class="sells-count">
                {{ shop.sells | sellCountFilter }}
              </div>
              <div class="sells-text">总销量</div>
            </div>
            <div class="info-goods">
              <div class="goods-count">
                {{ shop.goodsCount }}
              </div>
              <div class="goods-text">全部宝贝</div>
            </div>
          </div>
          <div class="shop-middle-item shop-middle-right">
            <table>
              <tr v-for="(item, index) in shop.score" :key="index">
                <td>{{ item.name }}</td>
                <td class="score" :class="{ 'score-better': item.isBetter }">
                  {{ item.score }}
                </td>
                <td class="better" :class="{ 'better-more': item.isBetter }">
                  <span>{{ item.isBetter ? "高" : "低" }}</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="shop-bottom">
          <div class="enter-shop">进店逛逛</div>
        </div>
      </div>

      <div v-if="Object.keys(detailInfo).length !== 0" class="goods-info">
        <div class="info-desc clear-fix">
          <div class="start"></div>
          <div class="desc">{{ detailInfo.desc }}</div>
          <div class="end"></div>
        </div>
        <div class="info-key">{{ detailInfo.detailImage[0].key }}</div>
        <div class="info-list">
          <img
            v-for="(item, index) in detailInfo.detailImage[0].list"
            :src="item | Imgfilter"
            :key="index"
            alt=""
            @load="imgLoad"
          />
        </div>
      </div>

      <div
        class="param-info"
        ref="params"
        v-if="Object.keys(paramInfo).length !== 0"
      >
        <table
          v-for="(table, index) in paramInfo.sizes"
          class="info-size"
          :key="index"
        >
          <tr v-for="(tr, indey) in table" :key="indey">
            <td v-for="(td, indez) in tr" :key="indez">{{ td }}</td>
          </tr>
        </table>
        <table class="info-param">
          <tr v-for="(info, index) in paramInfo.infos" :key="index">
            <td class="info-param-key">{{ info.key }}</td>
            <td class="param-value">{{ info.value }}</td>
          </tr>
        </table>
        <div class="info-img" v-if="paramInfo.image.length !== 0">
          <img :src="paramInfo.image" alt="" />
        </div>
      </div>

      <div>
        <div
          v-if="Object.keys(commentInfo).length !== 0"
          class="comment-info"
          ref="comment"
        >
          <div class="info-header">
            <div class="header-title">用户评价</div>
            <div class="header-more">
              更多
              <i class="arrow-right"></i>
            </div>
          </div>
          <div class="info-user">
            <img :src="commentInfo.user.avatar" alt="" />
            <span>{{ commentInfo.user.uname }}</span>
          </div>
          <div class="info-detail">
            <p>{{ commentInfo.content }}</p>
            <div class="info-other">
              <span class="date">{{ commentInfo.created | showDate }}</span>
              <span>{{ commentInfo.style }}</span>
            </div>
            <div class="info-imgs">
              <img
                :src="item"
                v-for="(item, index) in commentInfo.images"
                :key="index"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- <GoodsList :goods="recommends"/> -->
    </Scroll>

    <div class="bottom-bar">
      <div class="bar-item bar-left">
        <div>
          <i class="icon service"></i>
          <span class="text">客服</span>
        </div>
        <div>
          <i class="icon shop"></i>
          <span class="text">店铺</span>
        </div>
        <div>
          <i class="icon select"></i>
          <span class="text">收藏</span>
        </div>
      </div>
      <div class="bar-item bar-right">
        <div class="cart" @click="addToCart">加入购物车</div>
        <div class="buy">购买</div>
      </div>
    </div>

    <Toast :message="message" :show="show" />
  </div>
</template>

<script>
import NavBar from "components/common/navBar/NavBar.vue";
import DetailSwiper from "./DetailSwiper.vue";
import {
  getDetail,
  GoodsInfo,
  Shop,
  GoodsParam,
  // getRecommend,
} from "network/detail";
import Scroll from "components/common/scroll/Scroll.vue";
import { formatDate } from "common/const.js";
// import GoodsList from "components/common/Goods/GoodsList.vue";
import Toast from "components/common/toast/Toast";

export default {
  name: "Detail",
  components: {
    NavBar,
    DetailSwiper,
    Scroll,
    Toast,
    // GoodsList
  },
  data() {
    return {
      iid: null,
      titles: ["商品", "参数", "评论", "推荐"],
      currentIndex: 0,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      themeTopYs: [],
      message: "",
      show: false,
    };
  },
  methods: {
    titleClick(index) {
      this.currentIndex = index;
      //详情页锚点链接
      this.$refs.scroll.scroll.scrollTo(0, -this.themeTopYs[index], 500);
    },
    backClick() {
      this.$router.go(-2);
    },
    imgLoad() {
      if (location.href.indexOf("#reloaded") == -1) {
        location.href = location.href + "#reloaded";
        location.reload();
      }
    },
    contentScroll(position) {
      // 获取详情页滚动的y值
      const positionY = -position.y;

      for (let i = 0; i < this.themeTopYs.length - 2; i++) {
        if (
          this.currentIndex !== i &&
          positionY >= this.themeTopYs[i] &&
          positionY < this.themeTopYs[i + 1]
        ) {
          this.currentIndex = i;
        }
      }
    },
    addToCart() {
      const product = {};
      // 获取存储要展示到购物车中的数据
      product.image = this.topImages[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      product.iid = this.iid;
      // 将商品添加到vuex管理
      // this.$store.commit('addCart',product)
      this.$store.dispatch("addCart", product).then((response) => {
        this.show = true;
        this.message = response;

        setTimeout(() => {
          this.show = false;
          this.message = '';
        }, 888);
      });
    },
  },
  created() {
    // 获取iid
    this.iid = this.$route.params.iid;
    // 请求详情数据
    getDetail(this.iid).then((response) => {
      const data = response.result;
      // 获取设置轮播图
      this.topImages = data.itemInfo.topImages;
      // 获取设置商品信息
      this.goods = new GoodsInfo(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      // 设置店铺信息
      this.shop = new Shop(data.shopInfo);
      // 商品详情数据
      this.detailInfo = data.detailInfo;
      // 商品参数
      this.paramInfo = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );
      // 评论信息
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0];
      }
      // 等图片加载完毕再取值
      setTimeout(() => {
        this.$nextTick(() => {
          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.params.offsetTop - 50);
          this.themeTopYs.push(this.$refs.comment.offsetTop);
          this.themeTopYs.push(0);
          this.themeTopYs.push(Number.MAX_VALUE);
        });
      }, 2000);
    });
    // 请求推荐数据
    /* getRecommend().then(response =>{
      this.recommends = response.data.list
    }) */
  },
  filters: {
    sellCountFilter: function (value) {
      if (value < 10000) return value;
      return (value / 10000).toFixed(1) + "万";
    },
    Imgfilter: function (value) {
      return "http:" + value;
    },
    showDate: function (value) {
      let date = new Date(value * 1000);
      return formatDate(date, "yyyy-MM-dd / hh:mm:ss");
    },
  },
};
</script>

<style scoped>
.bottom-bar {
  height: 58px;
  position: fixed;
  background-color: #fff;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  text-align: center;
}

.bar-item {
  flex: 1;
  display: flex;
}

.bar-item > div {
  flex: 1;
}

.bar-left .text {
  font-size: 13px;
}

.bar-left .icon {
  display: block;
  width: 22px;
  height: 22px;
  margin: 10px auto 3px;
  background: url("~assets/img/detail/detail_bottom.png") 0 0/100%;
}

.bar-left .service {
  background-position: 0 -54px;
}

.bar-left .shop {
  background-position: 0 -98px;
}

.bar-right {
  font-size: 15px;
  color: #fff;
  line-height: 58px;
}

.bar-right .cart {
  background-color: #ffe817;
  color: #333;
}

.bar-right .buy {
  background-color: #f69;
}

.comment-info {
  padding: 5px 12px;
  color: #333;
  padding-bottom: 75px;
  border-bottom: 5px solid #f2f5f8;
}

.info-header {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.header-title {
  float: left;
  font-size: 15px;
}

.header-more {
  float: right;
  margin-right: 10px;
  font-size: 13px;
}

.info-user {
  padding: 10px 0 5px;
}

.info-user img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.info-user span {
  position: relative;
  font-size: 15px;
  top: -15px;
  margin-left: 10px;
}

.info-detail {
  padding: 0 5px 15px;
}

.info-detail p {
  font-size: 14px;
  color: #777;
  line-height: 1.5;
}

.info-detail .info-other {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

.info-other .date {
  margin-right: 8px;
}

.info-imgs {
  margin-top: 10px;
}

.info-imgs img {
  width: 70px;
  height: 70px;
  margin-right: 5px;
}

.param-info {
  padding: 20px 15px;
  font-size: 14px;
  border-bottom: 5px solid #f2f5f8;
}

.param-info table {
  width: 100%;
  border-collapse: collapse;
}

.param-info table tr {
  height: 42px;
}

.param-info table tr td {
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}

.info-param-key {
  /*当value的数据量比较大的时候, 会挤到key,所以给一个固定的宽度*/
  width: 95px;
}

.info-param {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.param-value {
  color: #eb4868;
}

.info-img img {
  width: 100%;
}

.goods-info {
  padding: 20px 0;
  border-bottom: 5px solid #eee;
}

.info-desc {
  padding: 0 15px;
}

.info-desc .start,
.info-desc .end {
  width: 90px;
  height: 1px;
  background-color: #a3a3a5;
  position: relative;
}

.info-desc .start {
  float: left;
}

.info-desc .end {
  float: right;
}

.info-desc .start::before,
.info-desc .end::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #333;
  bottom: 0;
}

.info-desc .end::after {
  right: 0;
}

.info-desc .desc {
  padding: 15px 0;
  font-size: 14px;
}

.info-key {
  margin: 10px 0 10px 15px;
  color: #333;
  font-size: 15px;
}

.info-list img {
  width: 100%;
}

.detailNav {
  position: relative;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
}

.content {
  height: 100vh;
}

#detail {
  position: relative;
  z-index: 999;
  background-color: #fff;
}

.title {
  display: flex;
}

.itemTitle {
  flex: 1;
}

.active {
  color: var(--color-high-text);
}

.back {
  vertical-align: middle;
}

.base-info {
  margin-top: 15px;
  padding: 0 8px;
  color: #999;
  border-bottom: 5px solid #f2f5f8;
}

.info-title {
  color: #222;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.info-price {
  margin-top: 10px;
}

.info-price .n-price {
  font-size: 24px;
  color: var(--color-high-text);
}

.info-price .o-price {
  font-size: 13px;
  margin-left: 5px;
  text-decoration: line-through;
}

.info-price .discount {
  font-size: 12px;
  padding: 2px 5px;
  color: #fff;
  background-color: var(--color-high-text);
  border-radius: 8px;
  margin-left: 5px;

  /*让元素上浮一些: 使用相对定位即可*/
  position: relative;
  top: -8px;
}

.info-other {
  margin-top: 15px;
  line-height: 30px;
  display: flex;
  font-size: 13px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
  justify-content: space-between;
}

.info-service {
  display: flex;
  justify-content: space-between;
  line-height: 60px;
}

.info-service-item img {
  width: 14px;
  height: 14px;
  position: relative;
  top: 2px;
}

.info-service-item span {
  font-size: 13px;
  color: #333;
}

.shop-info {
  padding: 25px 8px;
  border-bottom: 5px solid #f2f5f8;
}

.shop-top {
  line-height: 45px;
  /* 让元素垂直中心对齐 */
  display: flex;
  align-items: center;
}

.shop-top img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.shop-top .title {
  margin-left: 10px;
  vertical-align: center;
}

.shop-middle {
  margin-top: 15px;
  display: flex;
  align-items: center;
}

.shop-middle-item {
  flex: 1;
}

.shop-middle-left {
  display: flex;
  justify-content: space-evenly;
  color: #333;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sells-count,
.goods-count {
  font-size: 18px;
}

.sells-text,
.goods-text {
  margin-top: 10px;
  font-size: 12px;
}

.shop-middle-right {
  font-size: 13px;
  color: #333;
}

.shop-middle-right table {
  width: 120px;
  margin-left: 30px;
}

.shop-middle-right table td {
  padding: 5px 0;
}

.shop-middle-right .score {
  color: #5ea732;
}

.shop-middle-right .score-better {
  color: #f13e3a;
}

.shop-middle-right .better span {
  background-color: #5ea732;
  color: #fff;
  text-align: center;
}

.shop-middle-right .better-more span {
  background-color: #f13e3a;
}

.shop-bottom {
  text-align: center;
  margin-top: 10px;
}

.enter-shop {
  display: inline-block;
  font-size: 14px;
  background-color: #f2f5f8;
  width: 150px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
}
</style>